import { Provider } from 'react-redux'
import { Routes, Route, HashRouter } from'react-router-dom'
import { routes } from './routes/menus'
import Login from './pages/Login'
import Layout from './components/Layout'
import store from './store'
import { ROUTE_COMPONENT } from './routes'

export default function App() {
  return (
    <Provider store={store}>
      <HashRouter>
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/" element={<Layout />}>
            {routes.map((item) => {
              const Component = ROUTE_COMPONENT[item.key]
              return (
                <Route
                  path={item.path}
                  key={item.key}
                  element={<Component />}
                />
              )
            })}
          </Route>
        </Routes>
      </HashRouter>
    </Provider>
  )
}
